@import "../const.scss";

.nav {
  padding-top: 1rem;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: center;
  background-color: $app-clr-2;
  height: 100%;
  width: $width-nav + 10px;
  overflow: hidden;
  min-height: 720px;
  button {
    margin-bottom: $sm-gutter;
    width: 100%;
  }

  hr {
    margin: 0 0 9px 0;
    border-bottom: 1px solid $app-clr-blue-1;
    width: 100%;
  }

  .nav-links {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-bottom: $xs-gutter;
  }

  .nav-items {
    display: flex;
    flex-direction: column;
    a {
      text-decoration: none;
    }
    width: 100%;
    padding: 0 10px;
  }

  .nav-items button div {
    font-size: 0.5rem;
  }

  .container {
    text-align: center;
    padding: 0;
    margin-bottom: $sm-gutter;
    color: $app-clr-blue-4;
  }
}

.nav-active {
  background-color: $app-clr-1;
}
